<template>
  <div class="login-container">
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" label-width="100px">
      <h2 class="login-title">🎵 PIPI音乐</h2>

      <el-form-item label="手机号" prop="userAccount" class="el-form-item">
        <el-input type="text" v-model="loginForm.userAccount" placeholder="请输入手机号" class="input-width"></el-input>
      </el-form-item>

      <el-form-item label="短信验证码" prop="smsCode" class="el-form-item" hidden="hidden">
        <div class="code-container">
          <el-input type="text" v-model="loginForm.smsCode" placeholder="请输入短信验证码"
                    class="code-input"></el-input>
          <el-button type="primary" @click="getSmsCode" class="code-button">获取短信验证码</el-button>
        </div>
      </el-form-item>

      <el-form-item label="密码" prop="userPassword" class="el-form-item">
        <el-input type="password" v-model="loginForm.userPassword" placeholder="请输入密码"
                  class="input-width"></el-input>
      </el-form-item>

      <el-form-item label="图片验证码" prop="code" class="el-form-item">
        <div class="code-container">
          <el-input type="text" v-model="loginForm.code" placeholder="请输入图片验证码" class="code-input"></el-input>
          <img :src="codeUrl" alt="图片验证码" class="code-image" @click="getCode">
        </div>
      </el-form-item>

      <div style="text-align: center">
        <el-button type="primary" @click="login" class="login-button">登录</el-button>
      </div>

      <p class="signup-guide">还没有账号？<router-link to="/register">免费注册</router-link></p>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
import request from "@/utils/request";
import {setToken, setUserInfo} from "@/utils/auth";

export default {
  name: 'UserLogin',
  data() {
    return {
      codeUrl: '',
      loginForm: {
        userAccount: '',
        smsCode: '',
        userPassword: '',
        code: '',
        uuid: '',
      },
      loginRules: {
        userAccount: [{required: true, trigger: "blur", message: "请输入手机号"}],
        // smsCode: [{required: true, trigger: "blur", message: "请输入短信验证码"}],
        userPassword: [{required: true, trigger: "blur", message: "请输入密码"}],
        code: [{required: true, trigger: "blur", message: "请输入图片验证码"}]
      },
    };
  },
  methods: {
    getCode() {
      axios({
        url: '/api/code',
        method: 'get',
      }).then(res => {
        this.codeUrl = "data:image/gif;base64," + res.data.img;
        this.loginForm.uuid = res.data.uuid;

      })
    },
    getSmsCode() {
      if (!this.loginForm.userAccount) {
        this.$message.error('请先输入手机号');
        return;
      }
      // 发送短信验证码逻辑
      this.$message.success(`短信验证码已发送到您的手机：${this.loginForm.userAccount}`);
    },
    login() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.doLogin()
        } else {
          console.log('验证失败');
          return false;
        }
      });
    },
    doLogin() {
      request({
        url: '/auth/web/login',
        headers: {
          isToken: false,
          repeatSubmit: false
        },
        method: 'post',
        data: this.loginForm
      }).then(resp => {
        if (resp.code === 200) {
          let userInfo = resp.data
          setToken(userInfo.token)
          setUserInfo(userInfo)
          this.$router.push("/")
        }
      })
    }
  },
  created() {
    this.getCode();
  }
};
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f7f7f7;
  background-image: url("https://t.alcy.cc/ycy");
  background-size: cover;
}

.login-form {
  background: rgba(255, 255, 255, 0.9);
  padding: 15px;
  border-radius: 8px;
  width: 100%;
  max-width: 400px;
}

.login-form:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.login-title {
  text-align: center;
  margin-bottom: 15px;
  color: #333;
  font-size: 24px;
}

.el-form-item {
  margin: 20px auto;
}

.input-width {
  width: 300px;
}

.code-button {
  padding: 10px 5px;
  border-radius: 4px;
  font-size: 12px;
  width: 90px;
}

.code-input {
  width: 190px;
  margin-right: 10px;
}

.code-image {
  height: 40px;
  width: 90px;
}

.code-container {
  display: flex;
  align-items: center;
}

.login-button {
  width: 70%;
  padding: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  background-color: #007bff;
  color: white;
}

.signup-guide {
  text-align: center;
  margin-top: 10px;
  font-size: 12px;
  color: black;
}

.signup-guide a {
  color: #007bff;
  text-decoration: none;
}
</style>